<template>
	<div>
		<TablePlus :columns="columns" :requestApi="RequestNoticeList" :initParam="initParam">
			<template #tableHeader>
				<el-button type="primary" :icon="CirclePlus" size="small" @click="bindAddNotice">新增公告</el-button>
				<el-button type="primary" :icon="Upload" plain size="small">批量删除</el-button>
			</template>
			<template #createtime="{ row }">
				<span>{{ dayjs(row.createtime).format('YYYY-MM-DD HH:mm:ss') }}</span>
			</template>
			<template #operation="{row}">
				<el-button type="primary" link :icon="EditPen">编辑</el-button>
				<el-popconfirm title="确认要删除此记录吗?" @confirm="bindDeleteNotice(row.id)">
						<template #reference>
							<el-button type="primary" size="small" v-permession="['DeleteNotice']">删除</el-button>
						</template>
					</el-popconfirm>
			</template>
		</TablePlus>
		<el-dialog title="新增公告" v-model="disabledNotice">
			<NoticeAdd v-if="disabledNotice" @close="bindCloseNotice"></NoticeAdd>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TablePlus from '@/components/TablePlus/index.vue'
import NoticeAdd from './components/NoticeAdd.vue'
import type { TableModel } from '@/components/TablePlus/interface'
import { Delete, EditPen, CirclePlus, Upload } from '@element-plus/icons-vue'
import { dayjs } from 'element-plus'
import { api } from '@/api'
const { RequestNoticeList,RequestNoticeDelete } = api
const initParam = ref({})

const columns: Array<TableModel.ColumnProps> = [
	{ prop: 'id', label: '序列号', width: 100 },
	{ prop: 'content', label: '内容', search: { el: 'input' } },
	{ prop: 'createtime', label: '时间' },
	{ prop: 'operation', label: '操作', fixed: 'right', width: 330 }
]

const disabledNotice = ref<boolean>(false)
const bindAddNotice = () => {
	disabledNotice.value = true
}
const bindCloseNotice = () => {
	disabledNotice.value = false
	initParam.value = { title: '添加成功，刷新列表' }
}
const bindDeleteNotice = async(id:number)=>{
	const data = await RequestNoticeDelete(id)
	const {resultCode} = data
	initParam.value = { title: '删除成功，刷新列表' }
}
</script>

<style scoped></style>
